<template>
<section v-loading="loading">
   <!-- 查询框 -->
   <div class="searchbox">
      <el-form :inline="true" :model="query" class="demo-form-inline fl">
         <el-form-item>
            <el-input v-model="query.k" placeholder="姓名/手机号" size="medium"></el-input>
         </el-form-item>
         <el-form-item>
            <el-select v-model="query.status" placeholder="状态" size="medium">
               <el-option label="全部" value=""></el-option>
               <el-option label="待审核" value="0"></el-option>
               <el-option label="已通过" value="1"></el-option>
               <el-option label="未通过" value="2"></el-option>
            </el-select>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" size="small" @click="getData" icon="el-icon-search">搜&nbsp;&nbsp;索</el-button>
         </el-form-item>
      </el-form>
      <div class="textbox">
         <p class="fl">免费试学活动通知：凡参与免费试学活动者，请于第三方...</p>
         <el-switch v-model="value" style="float:right" @change="textchange"></el-switch>
      </div>
   </div>
   <!-- 主体内容 -->
  <div @contextmenu="$parent.addMenu([{name:'刷新试学列表',method:'getData',icon:'icon-shuaxin'}])">
   <el-table ref="multipleTable" :data="listData" tooltip-effect="dark" style="text-align:center">
      <el-table-column prop="real_name" label="姓名"></el-table-column>
      <el-table-column prop="mobile" label="手机号"></el-table-column>
      <el-table-column label="申请时间">
         <template slot-scope="scope">{{ scope.row.time|date('Y-m-d H:i') }}</template>
      </el-table-column>
      <el-table-column label="状态">
         <template slot-scope="scope">
            <font v-if="scope.row.status==1" color="#67C23A">已通过</font>
            <font v-else-if="scope.row.status==2" color="#F56C6C">未通过</font>
            <font v-else-if="scope.row.status==0">待审核</font>
         </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column label="操作">
         <template slot-scope="scope">
            <div @click="dialog(scope.row)" style="color:#67C23A;cursor:pointer">编辑</div>
         </template>
      </el-table-column>
   </el-table>
   <!-- 分页 -->
   <div class="breakpage" v-if="page.total>0">
      <el-pagination layout="total, prev, pager, next" background :current-page="parseInt(page.curpage)"
         :page-size="parseInt(page.pagesize)" :total="parseInt(page.total)" @current-change="handleCurrentChange" >
      </el-pagination>
   </div>
 </div>
   <!-- ↓↓编辑弹窗↓↓ -->
   <el-dialog title="审核试学" :visible.sync="editVisible" width="600px">
      <el-form :model="edit" label-width="100px">
         <el-form-item label="状态">
            <el-radio-group v-model="edit.status">
               <el-radio label="0">待审核</el-radio>
               <el-radio label="1">已通过</el-radio>
               <el-radio label="2">未通过</el-radio>
            </el-radio-group>
         </el-form-item>
         <el-form-item label="备注">
            <el-input type="textarea" :rows="3" v-model="edit.remark"></el-input>
         </el-form-item>
      </el-form>
      <div slot="footer">
         <el-button size="small" @click="editVisible=false">取 消</el-button>
         <el-button size="small" type="primary" @click="update">确 定</el-button>
      </div>
   </el-dialog>
   <!-- ↑↑编辑弹窗↑↑ -->
</section>
</template>

<script>
import * as api from '../api/index'
import { date } from '../lib/function';
export default {
   name: 'shixue',
   data() {
      return {
         m: 'shixue',
         query: {}, //搜索数据
         multipleSelection: [],
         editVisible:false,
         edit:{},
         value:false,
      }
   },
   computed: {
      listData() {
         return this.$store.state[this.m].data;
      },
      page() {
         return this.$store.state[this.m].page;
      },
      loading() {
         return this.$store.state[this.m].loading;
      }
   },
   methods: {
      getData() { //更新列表数据
         this.$store.dispatch(
            this.m + '/getData',
            JSON.parse(JSON.stringify(this.query))
         );
      },
      dialog(row){
         this.editVisible = true;
         this.edit = JSON.parse(JSON.stringify(row));
      },
      update(){
         let _this = this;
         api.shixue.update(_this.edit, res => {
            if (res.status == 1) {
               _this.getData();
               _this.editVisible = false;
            }
            else _this.$message(res);
         });
      },
      handleCurrentChange(p){
         this.query.p = p;
         this.getData();
      },
      textchange(res){
         if (res) {
            this.$notify.success({title:'成功',message:'免费试学已开启'});
         } else{
            this.$notify.info({title:'提示',message:'免费试学已关闭'});
         }
      }
   },
   filters: {
      date
   },
   created() {
      if(this.$parent.school.current.id==undefined||this.$store.state[this.m].school_id!=this.$parent.school.current.id) {
        this.query={};
        this.getData();
        this.$store.commit(this.m+'/update',{type:'school_id',data:this.$parent.school.current.id});
      }else{
        this.query=JSON.parse(JSON.stringify(this.$store.state[this.m].query));
      }
   }
}
</script>

<style scoped>
.textbox{
   width:500px;
   height:20px;
   padding:10px;
   background-color:rgb(254,222,176);
   border-radius:3px;
   border:1px solid #E6A23a;
   float:right;
}
.textbox p{
   font-size:14px;
   color:#666;
}

</style>
